v-model 表單運用

v-model 除了用在 input 上以外，所有的表單項目也都可套用，如 select、checkbox、textarea 皆可，不同的項目應用方式略有不同。

Select

Select 的選項可以直接使用 option 標籤中的 value，或是透過 v-for 搭配元件內的 data 產生多個 option，兩者都是同樣以 value 作為資料來源。

// html
<div id="app">
  <h4>Select</h4>
  <select name="" id="" class="form-control" v-model="selected">
    <option disabled value="">請選擇</option>
    <option value="跑步">跑步</option>
    <option value="游泳">游泳</option>
    <option value="自行車">自行車</option>
  </select>
  <p>小明喜歡的運動是 {{ selected }}。</p>
  <hr>
  <select name="" id="" class="form-control" v-model="selected2">
    <option disabled value="">請選擇</option>
    <option :value="item" v-for="item in selectData">{{ item }}</option>
  </select>
  <p>小明喜歡的運動是 {{ selected2 }}。</p>
</div>

// JS
var app = new Vue({
  el: '#app',
  data: {
    selectData: ['跑步', '游泳', '自行車'],
    selected: '',
    selected2: '',
  }
})

• select 所綁定的 v-model 其值來自於 內的 value。
• value 可以使用自行撰寫或使用 v-for 搭配 Vue Data 來呈列（v-for 在後面的範例會提到，用於呈現多筆資料）。
  課程範例

Checkbox 與 Radio

checkbox 作為一個資料的 true or false。

// html
<div id="app">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1" v-model="checkbox1">
    <label class="form-check-label" for="check1">{{ checkbox1 }}</label>
  </div>
</div>

// JS
var app = new Vue({
  el: '#app',
  data: {
    checkbox1: false,
  },
});

• 當 input checkbox 沒有設定 value 時，預設是作為 v-model 對應屬性的 true or false。
  課程範例

或者可做為多個選向，將資料綁定到同一個陣列內。

// html
<div id="app">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model="checkboxArray" value="雞">
    <label class="form-check-label" for="check2">雞</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check3" v-model="checkboxArray" value="豬">
    <label class="form-check-label" for="check3">豬</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check4" v-model="checkboxArray" value="牛">
    <label class="form-check-label" for="check4">牛</label>
  </div>
  
  {{ checkboxArray }}
</div>


// JS
var app = new Vue({
  el: '#app',
  data: {
    checkboxArray: [],
  },
});

• checkbox 是多選選項
• 如果多個 input checkbox 的 v-model 是對應同一個 data，並且有設定 value 時，則是將該 data 視為一個陣列，核取的選項則為陣列內的值。
  課程範例

** Radio 則是單一選項。**

// html
<div id="app">
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio2" v-model="singleRadio" value="雞">
    <label class="form-check-label" for="radio2">雞</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio3" v-model="singleRadio" value="豬">
    <label class="form-check-label" for="radio3">豬</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio4" v-model="singleRadio" value="牛">
    <label class="form-check-label" for="radio4">牛</label>
  </div>

  您選擇了：{{ singleRadio }}
</div>


// JS
var app = new Vue({
  el: '#app',
  data: {
    singleRadio: '',
  },
});

• radio 則是單一選項。
• 如果多個 input radio 的 v-model 是對應同一個 data 時，該 v-model 的值則是核取的 radio 選項。
  課程範例

v-on：事件觸發器

可以用 v-on 指令監聽網頁上的事件（如同純 JS 的 DOM 事件），並在觸發時運行一些 Vue 的方法。
官方文件：https://cn.vuejs.org/v2/guide/events.html

課程範例

// html
<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>


// JS
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

• v-on 是觸發器，click 是觸發的方法。
• HTML 中的 v-on:click 可以直接操作 data 內的資料。
  範例連結